<template>
	<view class="">
		<!-- 背景 -->
		<view class="topic-bg">
			<image :src="item.titlepic" mode="scaleToFill"></image>
		</view>
		<!-- 话题详情 -->
		<view class="topicInfo">
			<view class="topicInfo-t u-f">
				<image :src="item.titlepic" mode="widthFix"></image>
				<view class="topicname">#{{item.title}}#</view>
			</view>
			<view class="topicInfo-c u-f">
				<view class="dongtai">
					动态 {{item.totalnum}}
				</view> 
				<view class="today">
					今日 {{item.todaynum}}
				</view>
			</view>
			<view class="topicInfo-b">{{item.desc}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props :{
			item:Object
		}
	}
</script>

<style scoped>
	.topic-bg {
		width:100%;
		position:relative;
		height:300upx;
		overflow: hidden;
	}
	.topic-bg > image {
		width:100%;
		position: absolute;
		left:0;
		top:0;
		filter: blur(10px);
	}
	.topicInfo {
		padding: 0 20upx;
	}
	.topicInfo-t {
		position: relative;
	}
	.topicInfo-t > image {
		width:150upx;
		height:150upx;
		border-radius: 20upx;
		position: absolute;
		top:-75upx;
	}
	.topicInfo-t .topicname{
		margin-left : 190upx;
		font-size: 36upx;
	}
	.topicInfo-c {
		color:#cdcdcd;
		font-size: 32upx;
		padding: 20upx 0;
	}
	.topicInfo-c .dongtai{
		margin-right:20upx;
	}
	.topicInfo-b{
		font-size: 34upx;
		color:#a9a9a9;
	}
</style>
